<template>
  <div class="container">
    <div class="search-bar">
      <el-input v-model="inputVal" placeholder="请输入图标名称" suffix-icon="el-icon-search" clearable></el-input>
    </div>
    <div class="icon-contain">
      <div class="icon-item" :class="formIcon === item.name ? 'active' : ''" v-for="item in searchList" :key="item.icon" @click="getIcon(item.name)">
        <i class="icon-style" :class="item.icon"></i>
        <span class="icon-name">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      inputVal: '',
      list: [], // 全部图标列表
    }
  },
  props: {
    formIcon: {
      type: String
    },
    iconFlag: {
      type: Boolean
    }
  },
  created() {
    this.loadData()
  },
  computed: {
    searchList () { // 动态获取图标列表
      if (!this.inputVal) {
        return this.list
      }
      return this.list.filter(item => {
        return item.name.includes(this.inputVal)
      })
    }
  },
  methods: {
    loadData() { // 初始化数据
      this.list = [
        { icon: 'el-icon-s-home', name: 'el-icon-s-home' },
        { icon: 'el-icon-delete', name: 'el-icon-delete' },
        { icon: 'el-icon-setting', name: 'el-icon-setting' },
        { icon: 'el-icon-user', name: 'el-icon-user' },
        { icon: 'el-icon-star-off', name: 'el-icon-star-off' },
        { icon: 'el-icon-picture-outline', name: 'el-icon-picture-outline' },
        { icon: 'el-icon-s-custom', name: 'el-icon-s-custom' },
        { icon: 'el-icon-edit', name: 'el-icon-edit' },
        { icon: 'el-icon-folder-opened', name: 'el-icon-folder-opened' },
        { icon: 'el-icon-chat-dot-round', name: 'el-icon-chat-dot-round' },
        { icon: 'el-icon-upload', name: 'el-icon-upload' },
        { icon: 'el-icon-message-solid', name: 'el-icon-message-solid' },
        { icon: 'el-icon-share', name: 'el-icon-share' },
        { icon: 'el-icon-switch-button', name: 'el-icon-switch-button' },
        { icon: 'el-icon-location-outline', name: 'el-icon-location-outline' },
        { icon: 'el-icon-lock', name: 'el-icon-lock' },
        { icon: 'el-icon-message', name: 'el-icon-message' },
        { icon: 'el-icon-printer', name: 'el-icon-printer' }
      ]
    },
    getIcon (name) { // 点击获取值
      this.$nextTick(() => {
        this.$emit('update:formIcon', name)
        this.$emit('update:iconFlag', false)
        this.inputVal = ''
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  .search-bar {
    margin-bottom: 12px;
  }
  .icon-contain {
    width: 100%;
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    border: 1px solid #eee;
    .icon-item {
      width: calc(25% + 1px);
      padding: 10px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      cursor: pointer;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
      margin-right: -1px;
      margin-bottom: -1px;
      &:hover {
        color: #409eff;
      }
      .icon-style {
        display: inline-block;
        font-size: 24px;
        margin-bottom: 10px;
      }
      .icon-name {
        display: inline-block;
        font-size: 14px;
        height: 38px;
      }
    }
    .active {
      color: #409eff;
    }
  }
}
</style>